// 静默注释 
// 只保留在SASS源文件中，编译后被省略。

/*普通注释  会保留到编译后的文件*/

@use "sass:math"; // 使用sass中math模块

$hot: #e1251b;
$lightGrey: #999;
$warm: #FFCCCC;
$cool: #99CCCC;
$light: #FFFF99;
$success: #99CC99;

$typeArea: 1226px;

$type1: 14px/18px "微软雅黑";

$side: left;


@function pxtorem($val) {
    // @return #{calc($val/100px)}rem;
    @return calc($val/100px)*1rem;
}


// 混合(mixin)  => 使用@mixin命令，定义一个代码块, 是可以重用的代码块。
// 1. 定义代码块
// @mixin 名字{
//     代码块;
// }

// 2. 使用代码块
// @include 代码块名字

// @mixin typeAreaCenter {
//     width: $typeArea;
//     margin: 0 auto;
// }

// 3. mixin的强大之处，在于可以指定参数和缺省值(默认值)。
@mixin typeAreaCenter($width: $typeArea) {
    // mixin中放的是css代码段
    width: $width;
    margin: 0 auto;
}

@mixin comp($cssKey, $cssVal) {
    @if($cssKey ==display and $cssVal==flex) {
        display: -webkit-flex;
        display: flex;
    }

    @else {
        // 传统的css3
        -ms-#{$cssKey}: $cssVal;
        -o-#{$cssKey}: $cssVal;
        -moz-#{$cssKey}: $cssVal;
        -webkit-#{$cssKey}: $cssVal;
        $cssKey: $cssVal;
    }
}

%w {
    @include typeAreaCenter();
    background-color: $light;
}

// 所谓sass继承,即将多个选择器的公有属性和方法单独提取出来,供每一个选择器使用 => 本质群组选择器


// 被继承的选择器
// .header {
//     @include typeAreaCenter();
//     background-color: $light;
// }

// // 需要继承.header的选择器
// .banner {
//     // @include typeAreaCenter();
//     @extend .header;
// }

// .container {
//     // @include typeAreaCenter();
//     @extend .header;
// }

// .footer {
//     // @include typeAreaCenter();
//     @extend .header;
// }



// 如果被继承的选择器,以%开头 => 只能被继承 不会被编译到css中
%w {
    @include typeAreaCenter();
    background-color: $light;
}

.header {
    @extend %w;
}

// 需要继承.header的选择器
.banner {
    @extend %w;
}

.container {
    @extend %w;
}

.footer {
    @extend %w;
}